<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.main_desk{
			width:800px;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}
/* 		#canvas2{
			border:1px solid red;
			background-color: #FFF;
		} */
		.color_item{
			width:40px;
			height:40px;
		}
		.wrapi{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			width: 100%;
		}
	</style>
	<body>
		<div class="wrapi">
			<div class="main_desk">
				<canvas id="canvas" width="690" height="679"></canvas>
				<div id="colorul"></div>
			</div>
			<div class="main_desk">
				<canvas id="canvas2" width="690" height="679"></canvas>
				<div id="colorul2"></div>
			</div>
			<div class="main_desk">
				<canvas id="canvas3" width="690" height="679"></canvas>
				<div id="colorul3"></div>
			</div>
			<div class="main_desk">
				<canvas id="canvas4" width="690" height="679"></canvas>
				<div id="colorul4"></div>
			</div>
			<div class="main_desk">
				<canvas id="canvas5" width="690" height="679"></canvas>
				<div id="colorul5"></div>
			</div>
		</div>
	</body>
	<script>
	let canvas = document.getElementById("canvas");
	let ctx1 = canvas.getContext("2d");
	reduceImageColors(ctx1,"./static/cc.jpeg","colorul");
	
	let canvas2 = document.getElementById("canvas2");
	let ctx2 = canvas2.getContext("2d");
	reduceImageColors(ctx2,"./static/bb.jpeg","colorul2");
	
	let canvas3 = document.getElementById("canvas3");
	let ctx3 = canvas3.getContext("2d");
	reduceImageColors(ctx3,"./static/dd.jpg","colorul3");
	
	let canvas4 = document.getElementById("canvas4");
	let ctx4 = canvas4.getContext("2d");
	reduceImageColors(ctx4,"./static/ee.jpg","colorul4");
	
	let canvas5 = document.getElementById("canvas5");
	let ctx5 = canvas5.getContext("2d");
	reduceImageColors(ctx5,"./static/xx.jpg","colorul5");
	
	function reduceImageColors(ctx,imgurl,id){
		let colorul = document.getElementById(id);
		let img = new Image();
		//指定图片的URL
		//img.src= "./static/aa.png";
		// img.src= "./static/cc.jpeg";
		// img.src = "./static/bb.jpeg";
		img.src = imgurl;
		img.onload = function(){
			ctx.drawImage(img, 0, 0, img.width, img.height); 
			let imageData = ctx.getImageData(0,0,690,679);
			let datas = imageData.data;
			let nativeSlice = Array.prototype.slice;
			let chunk = function (array, size) {
			    let r = [];
			    for (let i = 0; i < array.length; i += size) {
					let s = nativeSlice.call(array, i, i + size);
					s = s.splice(0,3);
					r.push(s.toString());
			    }
				return r;
			};
			let cache = chunk(datas,4);
			let resArr = getAllColors(cache);
			console.log(resArr);
			let colors = resArr.slice(0,30);
			let mains = "";
			let {tr,tb,tg,topkey} = getTopColorItem(colors);
			let toptemp = `<div class="color_item" style="background-color:rgb(${topkey})"></div>`;
			mains+=toptemp;
			let sitem = colors[0];
			let count = 1;
			for(let i =1;i<colors.length;i++){
				let {r,g,b} = getColorItemRGB(colors[i]);
				let a = getColorItemRGB(sitem);
				let tr = a.r;
				let tb = a.b;
				let tg = a.g;
				console.log(r,g,b,tr,tb,tg);
				let flag = r>tr-20&&r<tr+20&tg>tg-20&&tg<tg+20&&b>tb-20&&b<tb+20;
				let flag2 = r>245&&g>245&&b>245;
				let flag3 = r<10&&g<10&&b<10;
				if(!flag&&!flag2&&!flag3&&count<5){
					console.log(colors[i]);
					let temp = `<div class="color_item" style="background-color:rgb(${colors[i].key})"></div>`;
					mains+=temp;
					sitem = colors[i];
					count++;
				}
			}
			colorul.innerHTML = mains;
			console.log(colors)
		}
	}
	function getColorItemRGB(item){
		let arr = item.key.split(",");
		let r = Number(arr[0]);
		let g = Number(arr[1]);
		let b = Number(arr[2]);	
		return {r,g,b}
	}
	function getTopColorItem(colors){
		console.log(colors);
		let topcolor = colors[0];
		let {r,g,b} = getColorItemRGB(topcolor);
		console.log(topcolor);
		return {
			tr:r,
			tg:g,
			tb:b,
			topkey:topcolor.key
		}
	}
	function getAllColors(cache){
		const res={};
		let resArr = [];
		cache.forEach((key)=>{
			if(res[key]){
				res[key]++
			}else{
				res[key]=1
			}	
		});
		for(let key in res){
			if(res[key]!=1){
				resArr.push({
					key:key,
					value:res[key]
				});
			}
		}
		resArr.sort(function(a,b){
			if (a.value > b.value) {
					return -1;
				} else if (a.value == b.value) {
					return 0;
				} else {
					return 1;
				}
			
		});
		return resArr;
	}
	</script>
</html>
